import React, { Component } from 'react'
import { Modal,Input, message,Form, Select } from 'antd'
import axios from 'axios'


const { Option } = Select;
export default class Updata extends Component {
    state={
        "id":this.props.list.id,
        "memberName": this.props.list.memberName,
        "memberPass": "",
        "role": this.props.list.role,
        "confirmPass":"",
        "reConfirmPass":"",
        clone:true,
    }
    showstyle = React.createRef()
    reShowstyle = React.createRef()
    getVal=(e)=>{
        if(this.state.clone){
            this.setState({
                [e.target.name]:e.target.value
            })
        }else{
            this.setState({
                clone:true,
            })
        }
        if(e.target.name==="memberPass"){
            this.blockStyle(e.target.value)
        }
    }
    
    blockStyle=(value)=>{
        if(value !== ""){
            // 出现新密码确认密码框
            this.showstyle.current.input.style.display="block";
            this.reShowstyle.current.input.style.display="block";
        } else{
            this.setState({
                // [e.target.name]:e.target.value
                "confirmPass":"",
                "reConfirmPass":"",
            })
            this.showstyle.current.input.style.display="none";
            this.reShowstyle.current.input.style.display="none";
        }
    }
    update=()=>{
        // 判断输入的旧密码是否和父组件传来的密码相同
            if(this.state.confirmPass === this.state.reConfirmPass){
                console.log(this.state.memberPass)
            axios.post("/api/payment/admin/update",{
                "id":this.state.id,
                "memberPass": this.state.memberPass,
                "confirmPass":this.state.confirmPass,
                "role": this.state.role
            }).then(res=>{
                console.log(res)
                if(res.data.code===200){
                    message.success("修改成功!",1,()=>{
                        this.closeUpdate()
                    })
                }else{
                    message.error("旧密码输入不正确!")
                }
            })
            }else{
                message.error("输入的新密码和确认密码两次不一致!")
            }
        
    }
    closeUpdate=()=>{
        this.showstyle.current.input.style.display="none";
        this.reShowstyle.current.input.style.display="none";
        this.setState({
            confirmPass:"",
            reConfirmPass:"",
            memberPass:"",
            clone:"false",
        })
        this.props.closeUpdate()
    }
    // 权限框
    formRef = React.createRef();
        onGenderChange = (value) => {
            console.log(value)
            if (value === "user") {
                this.setState({role:0})
            }else if(value === "admin"){
                this.setState({role:1})
            }else if(value === "superadmin"){
                this.setState({role:2})
            }
        };
  render() {
      const {list,updateVisible} = this.props
    return (
      <div>
          <Modal title="修改信息" visible={updateVisible} okText={"确定"} cancelText={"取消"} onCancel={this.closeUpdate} onOk={this.update}>
              <Input style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} type="text" name="memberName" placeholder={list.memberName} onChange={this.getVal} disabled></Input>
              <Input placeholder="请输入旧密码" style={{height: "50px",marginBottom:" 20px",borderRadius: "5px"}} type="password" name="memberPass" value={this.state.memberPass} onChange={this.getVal}></Input>
              <Input ref={this.showstyle} placeholder="请输入新密码" style={{height: "50px",marginBottom:" 20px",borderRadius: "5px",display:"none"}} value={this.state.confirmPass} type="password" name="confirmPass" onChange={this.getVal}></Input>
              <Input ref={this.reShowstyle} placeholder="确认密码" style={{height: "50px",marginBottom:" 20px",borderRadius: "5px",display:"none"}} value={this.state.reConfirmPass} type="password" name="reConfirmPass" onChange={this.getVal}></Input>
              <Form>
              <Form.Item style={{width:"200px",borderRadius: "5px"}} name="gender" rules={[{required: true,},]}>
                <Select placeholder={this.props.list.role===2?"超级管理员":this.props.list.role===1?"管理员":"用户"} onChange={this.onGenderChange}>
                    <Option value="user">用户</Option>
                    <Option value="admin">管理员</Option>
                    <Option value="superadmin">超级管理员</Option>
                </Select>
            </Form.Item>
              </Form>
          </Modal>
      </div>
    )
  }
}
